<!DOCTYPE html>
<html>
<head>
    <title>薛彭帅的简历</title>
    <meta  name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="icon" href="./images/title.ico" type="image/x-icon"/>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/holder.js"></script>
    <style>
        body{
            padding-top: 70px;
        }
        .navbar-brand{
            cursor: pointer;
        }
        img{
            cursor: pointer;
        }
    </style>
</head>
<body class="container">

    <!-- modal -->
    <div class="modal fade" id="divModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">打印简历</h4>
                </div>
                <div class="modal-body">
                    打印输出简历功能暂时无法使用，敬请谅解！
                    <br>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default"  data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary disabled" plogin>打印</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部 -->
    <header>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <div class="navbar-brand"> 薛彭帅的简历</div>
                    <!-- 添加小屏下下拉列表按钮 样式 -->
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#divNav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div id="divNav" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>    
                            <button class="btn btn-success navbar-btn" type="button" data-toggle="modal" data-target="#divModal" title="Print">打印</button>
                            <!-- 模态框 尽量放在body下面，防止与其他模态框受影响干扰-->
<!--                             <div class="modal fade" id="divModal">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button class="close" type="button" data-dismiss="modal"><span>&times;</span></button>
                                            <h4 class="modal-title">打印简历</h4>
                                        </div>
                                        <div class="modal-body">
                                            打印输出简历功能暂时无法使用，敬请谅解！
                                            <br>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-default"  data-dismiss="modal">关闭</button>
                                            <button class="btn btn-primary" plogin>打印</button>
                                        </div>
                                    </div>
                                </div>
                            </div> -->

                        <button class="btn btn-info navbar-btn download" data-toggle="tooltip" style="border: 0" data-placement="buttom" title="Download">下载简历</button>

                        </li>
                    </ul>
                </div>
            </div>
            
        </nav>
    </header>

    <div class="row">
    <!-- 左侧 -->
        <div class="col-sm-3">
            <div class="panel panel-info">
                <div class="panel-heading">基本信息</div>
                <div class="panel-body">
                    <img src="./images/myphoto.png" class="img-responsive img-rounded img-thumbnail" alt="Me">
                    <p class="text-center text-primary">薛彭帅</p>
                    <address>
                        <strong>联系方式</strong><br>
                        <span class="glyphicon glyphicon-map-marker" title="Address"><kbd>河北省石家庄市</kbd></span><br>
                        <span class="glyphicon glyphicon-home" title="School">石家庄学院</span><br>
                        <span class="glyphicon glyphicon-heart" title="School">地理信息科学</span><br>
                        <span class="glyphicon glyphicon-phone" title="Mobile">15533619616</span><br>
                        <span class="glyphicon glyphicon-envelope" title="Email"><code>15533619616@163.com</code></span>
                    </address>
                </div>
            </div>
            <!-- 基本技能 panel -->
            <div class="panel panel-info">
                <div class="panel panel-heading"> 基本技能 </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <span class="text-muted">HTML</span>
                        </div>
                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped active" style="width: 85%"></div>
                            </div>
                        </div> 	
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <span class="text-success">JQuery</span>
                        </div>
                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <span class="text-info">CSS</span>
                        </div>
                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-info active" style="width: 70%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <span class="text-warning">Bootstrap</span>
                        </div>
                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-warning active" style="width: 65%"></div>
                            </div>
                        </div>
                    </div> 

                    <div class="row">
                        <div class="col-sm-3">
                            <span class="text-danger">Ajax</span>
                        </div>
                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 70%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <span class="text-danger">Python</span>
                        </div>
                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-danger active" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <span class="text-danger">git</span>
                        </div>
                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-info active" style="width: 60%"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- panel  联系我 -->
            <div class="panel panel-primary">
                <div class="panel panel-heading">联系我</div>
                <div class="panel-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" id="email" class="form-control" placeholder="Email">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10">
                                <input type="text" id="name" class="form-control" placeholder="Name">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-10 col-sm-offset-2">
                                <button type="button" class="btn btn-primary pull-right sendToMe">发送</button>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <!-- 右侧 -->
        <div class="col-sm-9">
            <!-- 个人简短介绍 -->
            <div class="jumbotron">
                <p class="text-left small">
                爱学习、爱编程、爱挑战、爱钻研、喜欢团队"作战".
                <br> 
                I love programming.
                </p>
            </div>

            <!-- 面板组 -->
            <div class="panel-group" id="accoradion">
                <!-- 获奖情况 panel -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a href="#collapseOne" data-toggle="collapse" data-parent="#accoradion">奖励与证书</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="list-group">
                                    <li class="list-group-item list-group-item-success">
                                        <div class="row">
                                            <div class="col-sm-5">2018</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">全国GIS大赛二等奖</div>
                                        </div>
                                    </li>

                                    <li class="list-group-item list-group-item-warning">
                                        <div class="row">
                                            <div class="col-sm-5">2018</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">国家励志奖学金</div>
                                        </div>
                                    </li>

                                     <li class="list-group-item list-group-item-info">
                                        <div class="row">
                                            <div class="col-sm-5">2018</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">学校二等奖学金</div>
                                        </div>
                                    </li>

                                     <li class="list-group-item list-group-item-danger">
                                        <div class="row">
                                            <div class="col-sm-5">2017</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">石家庄市武术比赛三等奖</div>
                                        </div>
                                    </li>

                                    <li class="list-group-item list-group-item-warning">
                                            <div class="row">
                                                <div class="col-sm-5">2017</div>
                                                <div class="col-sm-2"> </div>
                                                <div class="col-sm-5">IC3认证</div>
                                            </div>
                                    </li>

                                    <li class="list-group-item list-group-item-info">
                                        <div class="row">
                                            <div class="col-sm-5">2017</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">计算机二级Python证书</div>
                                        </div>
                                    </li>

                                     <li class="list-group-item list-group-item-danger">
                                        <div class="row">
                                            <div class="col-sm-5">2018</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">计算机二级Office证书</div>
                                        </div>
                                    </li>

                                    <li class="list-group-item list-group-item-info">
                                        <div class="row">
                                            <div class="col-sm-5">2018</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">系统集成工程师</div>
                                        </div>
                                    </li>

                                <li class="list-group-item list-group-item-warning">
                                        <div class="row">
                                            <div class="col-sm-5">2018</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">教师资格证</div>
                                        </div>
                                 </li>

                                <li class="list-group-item list-group-item-info">
                                        <div class="row">
                                            <div class="col-sm-5">2018</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">大学英语四级证书</div>
                                        </div>
                                 </li>



                                </ul>
                            </div>
                        </div>
                </div>
                <!-- 项目经验 panel -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a href="#collapseTwo" data-toggle="collapse" data-parent="#accoradion">项目经验</a>
                        </div>
                    </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="list-group">
                                    <li class="list-group-item list-group-item-success">
                                        <div class="row">
                                            <div class="col-sm-5">2017/12</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">个人博客</div>
                                        </div>
                                    </li>

                                    <li class="list-group-item list-group-item-warning">
                                        <div class="row">
                                            <div class="col-sm-5">2018/6</div>
                                            <div class="col-sm-2"> </div>
                                            <div class="col-sm-5">教育网站</div>
                                        </div>
                                    </li>

                                    <li class="list-group-item list-group-item-info">
                                        <div class="row">
                                            <div class="col-sm-5">2018.10- </div>
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-5">未完待续...</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div> 
                </div>
                <!-- 其他情况展示 panel -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a href="#collapseThree" data-toggle="collapse" data-parent="#accoradion">其他展示</a>
                        </div>
                    </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                            <div class="panel-body">

                                <!-- 控制小点 -->
                                <div id="divCarousel" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        <li data-target="#divCarousel" data-slide-to="0" class="active"></li>
                                        <li data-target="#divCarousel" data-slide-to="1"></li>
                                        <li data-target="#divCarousel" data-slide-to="2"></li>
                                    </ol>
                                    <!-- 图片 -->
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img src="./images/01.png" alt="" class="img-responsive img-rounded">
                                            <div class="carousel-caption">...</div>
                                        </div>

                                        <div class="item">
                                            <img src="./images/02.png" alt="" class="img-responsive img-rounded">
                                            <div class="carousel-caption">...</div>
                                        </div>

                                        <div class="item">
                                            <img src="./images/03.png" alt="" class="img-responsive img-rounded">
                                            <div class="carousel-caption">...</div>
                                        </div>
                                    </div>
                                    <!-- 左右标识 -->
                                    <a href="#divCarousel" class="left carousel-control" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a href="#divCarousel" class="right carousel-control" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <nav class="navbar-fixed-bottom text-center navbar-default">
            All images and contents &copy;薛彭帅
        </nav>
    </footer>

    <script type="text/javascript">
        // 下载地图的事件 鼠标放上去时的弹出提示
        $(function(){
            $('[data-toggle="tooltip"]').click(function(){
            alert("暂时不能下载");
            });

            $('.sendToMe').click(function(){
                alert("发送失败，系统出现小bug了呦~");
            });

        });

            
    </script>
</body>


</html>
